<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
		<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    	<script src="js/jquery.twbsPagination.js" type="text/javascript"></script>
		<style type="text/css">
			*{margin:0;padding:0;list-style-type:none;}
			a,img{border:0;}
			.actGotop{position:fixed;bottom:100px;right:50px;width:150px;height:195px;display:none;z-index: 100;}
			.actGotop a,.actGotop a:link{width:150px;height:195px;display:inline-block;background:url(img/blog7year_gotop.png) no-repeat;_background:url(img/blog7year_gotop.gif) no-repeat;outline:none;}
			.actGotop a:hover{background:url(img/blog7year_gotopd.gif) no-repeat;outline:none;}
			#container{ height:100%;margin: 0 auto;}
			.header{width:100%;height:50px;background:#2b2b2b;overflow: hidden;}
			.search{width:600px; height:50px; float:right;padding-right: 100px;}
			.logo{width: 200px; height: 50px;float: left;padding-left: 50px;}
			.searchWords{
				width:auto; float:right; font-size:12px; margin-right:10px; overflow: hidden; margin-top: 15px; color: #CCCCCC;
			}
			.searchInput{
				 width:205px; float:right; background:#434649; height:30px; margin:9px 9px 9px 0px; border:1px solid #434649;
				 -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s;transition-duration:0.3s;
			}
			.searchBtn{ width:30px; height:28px;float: left; margin-left:174px; margin-top:-30px; background:url(img/search_bg.jpg) no-repeat; cursor:pointer;}
			.searchText{    width: 215px;height: 30px;float: left; border: none;padding-left: 5px;font-size: 12px;color: #999; background: none; outline: none;}
			.searchInput.blur{ border-color:#ffa700;}	    
			.nav{
				width: 100%;height: 60px;
			}
			.nav ul{ width:100%;}
			.nav ul li{ float:left; line-height:60px; font-size:12px; width:25%;}
			.nav ul li a{ width:100%;display:block; height:60px; text-align:center; position:relative;-webkit-perspective:500px; overflow:hidden;}
			
			.box1,.box2:hover{
				animation: aa 2s ease forwards;
				-webkit-animation:aa 2s ease forwards;
				-webkit-transform-origin: 50% 50% -35px;
				
			}
			.box1{
				-webkit-transform: rotateX(0deg);background: #f7f9f8;
			}
			.box2{
				
				-webkit-transform: rotateX(90deg);background: #ffa700;color: #FFFFFF;
			}
			@keyframes aa{
				from{transform: rotateX(90deg);}
				to{transform: rotateX(0deg);}
			}
			a:hover{
				color:#fac400;
			}
			
			.content{ width:1280px; height:auto; margin:20px auto; padding: 25px 0px;}
			/*.contentTop{width:1280px; height:50px; line-height:50px; margin: 15px 0px; border-bottom: 1px solid #e5e5e5;}
			.contentTop a{ float:right; width: 150px; height: 40px; border: 1px solid #fac400; line-height: 40px; text-align: center; display: block; margin-top: 9px; color: #fac400; display: none;}
			.contentTop a:hover{ background: #fac400; color: #FFFFFF;}
			.contentTop h2{ font-size:20px; float:left; border-left: 4px solid #fac400; height: 30px; line-height: 30px; float: left; margin-top: 10px; padding-left: 10px;}*/
			.caseList{ width:100%; height:auto; position:relative; overflow:hidden;}
			.caseList ul{ width:1350px; height:auto; margin: auto;}
			.caseList li{ width:300px; height:235px; float:left; background:#fff; margin:0px 26px 35px 0px; position:relative; overflow:hidden;}
			.footer{ width:900px; height:50px; margin:20px auto; }
		</style>
	</head>
	<body >
		
		<div id="container">
            
            <!--头部-->
			<div class="header">
				<div class="logo">
					<a href="">
						<img src="img/logo.png"/>
					</a>
				</div>
				<div class="search">
					<div class="searchWords">
						热门搜索：
						<a href="">css3</a>
						<a href="">导航特效</a>
						<a href="">视觉差</a>
					</div>
					<div class="searchInput">
						<from action="/seach/" method="post">
							<input type="text" vaule="搜索特效" class="searchText" name="keywords" />
							<input type="submit" value class="searchBtn" />
						</from>
					</div>
				</div>
			</div>
			<!--导航-->
            <div class="nav">
            	<ul>
            		<li>
            		    <a href="h5.html">
            		    	<div class="naxBox box1">
            		    		<h2>H5动效</h2>
            		    	</div>
            		    	<div class="naxBox box2">
            		    		<h2>H5动效</h2>
            		    	</div>
            		    </a>
            		</li>
            		<li>
            		    <a href="animate.html">
            		    	<div class="naxBox box1">
            		    		<h2>手机微信特效</h2>
            		    	</div>
            		    	<div class="naxBox box2">
            		    		<h2>手机微信特效</h2>
            		    	</div>
            		    </a>
            		</li>
            		<li>
            		    <a href="article.html">
            		    	<div class="naxBox box1">
            		    		<h2>JQuery特效</h2>
            		    	</div>
            		    	<div class="naxBox box2">
            		    		<h2>JQuery特效</h2>
            		    	</div>
            		    </a>
            		</li>
            		<li>
            		    <a href="h5.html">
            		    	<div class="naxBox box1">
            		    		<h2>美文汇总</h2>
            		    	</div>
            		    	<div class="naxBox box2">
            		    		<h2>美文汇总</h2>
            		    	</div>
            		    </a>
            		</li>
            		
            	</ul>
            </div>
          	<!--内容-->
          	<div class="content">
          		
          		<div class="caseList">
          			<ul>
          				<li>
          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>
          								<div class="caseTime">2017-10-26</div>
          							</div>	
          						</div>
          					</a>
          				</li>
          				<li>
          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>
          								<div class="caseTime">2017-10-26</div>
          							</div>	
          						</div>
          					</a>
          				</li>
          				<li>
          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          								<div class="caseTime">2017-10-26</div>
          							</div>	
          							
          						</div>
          					</a>
          				</li>
          				<li>
          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>
          								<div class="caseTime">2017-10-26</div>
          							</div>	
          							
          						</div>
          					</a>
          				</li>
          				<li>
          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>
          								<div class="caseTime">2017-10-26</div>
          							</div>	
          							
          						</div>
          					</a>
          				</li>
          				<li>

          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>
          								<div class="caseTime">2017-10-26</div>
          							</div>	
          							
          						</div>
          					</a>
          				</li>
						<li>
          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>
          								<div class="caseTime">2017-10-26</div>
          							</div>	
          							
          						</div>
          					</a>
          				</li>
          				<li>
          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>
          								<div class="caseTime">2017-10-26</div>
          							</div>	
          							
          						</div>
          					</a>
          				</li>
          				
          			
          			</ul>
          		</div>
          	</div>
          	
          	<div class="footer">
			    <nav aria-label="Page navigation">
			        <ul class="pagination" id="pagination"></ul>
			    </nav>
			</div>
			<!--返回顶部-->
          	<div class="actGotop">
          			<a href="javascript:;" title="返回顶部"></a>
          	</div>
		</div>
	</body>
	
	<script type="text/javascript">
		$(function(){   
		    $(window).scroll(function() {      
		        if($(window).scrollTop() >= 200){
		            $('.actGotop').fadeIn(300); 
		        }else{    
		            $('.actGotop').fadeOut(300);    
		        }  
		    });
		    $('.actGotop').click(function(){
		    $('html,body').animate({scrollTop: '0px'}, 800);});   
		    
		    //分页
		    window.pagObj = $('#pagination').twbsPagination({
		            totalPages: 35,
		            visiblePages: 10,
		            onPageClick: function (event, page) {
		                console.info(page + ' (from options)');
		            }
        	}).on('page', function (event, page) {
            		console.info(page + ' (from event listening)');
       			});
		});
		
		
		
	</script>
</html>
